<template>
	<view class="content">
		<search @send="search()" v-model="c"></search>
		<view class="cache_view">
			<view class="cache_view_name">历史搜索</view>
			<view class="cache_view_item">
				<view @tap="navigateTo(item)" class="cache_view_value" v-for="(item,index) in cache" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view class="cache_view">
			<view class="cache_view_name">热门搜索</view>
			<view class="cache_view_item">
				<view @tap="navigateTo(item.word)" class="cache_view_value" v-for="(item,index) in words" :key="index">
					{{item.word}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '../../components/search.vue';
	import {
		get_
	} from '../../common/request.js';
	import api from '../../common/api.js';
	export default {
		components: {
			search
		},
		data() {
			return {
				c: "",
				cache: [],
				words: []
			}
		},
		onLoad() {
			this.getCache()
			this.getHotword()
		},
		methods: {
			getHotword() {
				get_(api.HOT_WORD).then(res => {
					this.words = res.data
				})
			},
			/**
			 * 获取
			 */
			getCache() {
				var that = this
				uni.getStorage({
					key: "search_history",
					success: (res) => {
						that.cache = JSON.parse(res.data)
					}
				})
			},
			/**
			 * 该数组是否存在某个元素 
			 * @param {Object} arr 数组
			 * @param {Object} data 数据
			 */
			isExists(arr, data) {
				var flag = false
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == data) {
						flag = true
						break
					}
				}
				return flag
			},
			/**
			 * 添加缓存(已存在删除,并且放在最前面)
			 * @param {Object} arr 数组
			 * @param {Object} data 数据
			 */
			addCache(arr, data) {
				if (data == null || data.trim() == '') {
					return arr
				}
				if (this.isExists(arr, data)) {
					for (var i = 0; i < arr.length; i++) {
						if (arr[i] == data) {
							arr.splice(i, 1)
							var array = []
							array.push(data)
							return array.concat(arr)
						}
					}
				} else {
					var array = []
					array.push(data)
					return array.concat(arr)
				}
			},
			/**
			 * 跳转
			 * @param {Object} data
			 */
			navigateTo(data) {
				uni.navigateTo({
					url: "./list?name=" + data
				})
			},
			/**搜索
			 * @param {Object} s
			 */
			search(s) {
				uni.getStorage({
					key: "search_history",
					success: (res) => {
						let data = JSON.parse(res.data)
						let array = this.addCache(data, s)
						if (array.length != 0) {
							uni.setStorage({
								key: "search_history",
								data: JSON.stringify(array)
							})
						}

					},
					fail: () => {
						let data = []
						let array = this.addCache(data, s)
						if (array.length != 0) {
							uni.setStorage({
								key: "search_history",
								data: JSON.stringify(array)
							})
						}
					}
				})
				uni.navigateTo({
					url: "./list?name=" + s
				})
			}
		}
	}
</script>

<style>
	.cache_view {
		flex-direction: column;
		width: 100%;
		padding: 20upx 16px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.cache_view_name {
		color: #555555;
	}

	.cache_view_item {
		flex-wrap: wrap;
		padding-left: 30upx;
		box-sizing: border-box;
	}

	.cache_view_value {
		padding: 10upx 20upx;
		color: #888888;
		background-color: #F2F3F5;
		border-radius: 5upx;
		margin: 20upx 20upx;
	}
</style>
